<template>
  <div>
    <el-table :data = 'list.children' border height="690px" stripe>
      <el-table-column type = "expand" >
        <template slot-scope="scope">
          <el-descriptions title="装备信息" :column = '1' style = "margin-left:50px">
            <el-descriptions-item label="装备价格">{{scope.row.price}}</el-descriptions-item>
            <el-descriptions-item label="装备描述" labelStyle = "width:70px">{{scope.row.descibe}}</el-descriptions-item>
        </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column prop = "name" label = "装备名称"></el-table-column>
      <el-table-column prop = "icon" label = "装备图标">
        <template slot-scope="scope">
          <img :src="$upload+'/'+scope.row.icon" style="height:3rem">
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="primary" size="small" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    async remove (row) {
      this.$confirm(`是否确定删除装备?"${row.name}"`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.post('rest/Item/delete', { _id: this.list._id, index: row._id }).then(res => {
          if (res.status !== 200) {
            return this.$message.error('删除装备失败！')
          }
          this.$message.success('删除装备成功！')
          this.$store.commit('UpdataItem', res.data)
        })
      })
    },
    edit (row) {
      window.sessionStorage.setItem('activePath', '/item/create')
      this.$router.push(`/item/edit/${row._id}`)
    }
  }
}
</script>

<style scoped>
.el-card{
  height: 70%;
}
</style>
